<template>

    <div>
        <div class="h">
            <!--
            <a href="/">首页</a>
             <a href="#/music">音乐</a>
             <a href="#/movie">电影</a>
             -->
            <button @click="goList">跳转到列表</button>
            <router-link to="/">首页</router-link>
            <router-link :to="{name:'list'}">列表</router-link>
            <router-link :to="{name:'detail'}">明细</router-link>
        </div>
        <router-view class="m"></router-view>
        <div class="f">底部</div>
    </div>

</template>

<script>

    export default {
        data() {
            return {}
        },
        methods:{
            goList(){
                this.$router.push("/list");
            }
        }
    }

</script>

<style scoped>
    .h {
        height: 100px;
        background-color: bisque;
    }

    .m {
        height: 200px;
        background-color: yellow;
    }

    .f {
        height: 100px;
        background-color: black;
    }
</style>